<template>
    <div class="infoTotal">
        <el-breadcrumb separator="/" class="tself">
            <el-breadcrumb-item>个人信息</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <div class="infoContent">
            <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
                <div>
                    <el-form-item label="用户名:" v-if="showname == true">
                        <el-tooltip class="item" effect="dark" content="点击修改用户名" placement="right">
                            <span @click="updatename" class="nameSpan">{{ sizeForm.name }}</span>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="用户名:" v-else>
                        <el-input v-model="sizeForm.newname" width="100px"></el-input>
                        <el-button type="primary" @click="toupdatename">保存</el-button>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="性别:">
                        <span>{{ sizeForm.sex }}</span>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="手机号:">
                        <span>{{ sizeForm.phone }}</span>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="默认地址:">
                        <span>{{ sizeForm.address }}</span>
                    </el-form-item>
                    <el-divider></el-divider>
                    <div class="pwdBox">
                        <el-form-item size="large" v-if="showpwd == true">
                            <el-button type="primary" size="mini" icon="el-icon-edit" @click="updatepwd">修改密码</el-button>
                        </el-form-item>
                        <el-form class="user-account-key" ref="form" :model="form" :rules="rules" label-width="100px"
                            v-else>
                            <el-form-item label="原密码" prop="password">
                                <el-input type="password" placeholder="请输入原密码" v-model="form.password"></el-input>
                            </el-form-item>
                            <el-form-item label="新密码" prop="newPassword">
                                <el-input type="password" placeholder="请设置新密码" v-model="form.newPassword"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="newPassword2">
                                <el-input type="password" placeholder="请确认新密码" v-model="form.newPassword2"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" size="mini" @click="toupdatepwd('form')">保存</el-button>
                                <el-button @click="$refs['form'].resetFields()" size="mini">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script src="../assets/js/SelfInfoView.js"></script>
<style src="../assets/css/SelfInfoView.css" scoped></style>